<template>
  <div class="dashboard">
    <main>
      <div class="card-wrap">
        <div class="card">
          <div class="card-title">
            <p>百元投资拉动增量收入(元)</p>
            <span>{{numeral(TopCount.bytzld).format('0,00.0')}}</span>
          </div>
          <div class="card-row">
            <div class="row-left">
              <p>增量收入</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.increaseIncome).format('0,0')}}</span>
            </div>
          </div>
          <div class="card-row">
            <div class="row-left">
              <p>投资完成</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.investLjComple).format('0,0')}}</span>
            </div>
          </div>
          <!-- <div class="card-row">
            <div class="row-left">
              <p>百元投资拉动增量收入</p>
              <span>单位:元</span>
            </div>
            <div class="row-right">
        
            </div>
          </div>-->
        </div>
        <div class="card">
          <div class="card-title">
            <p>投资完成率</p>
            <span>{{TopCount.yusuanPer}}%</span>
          </div>
          <div class="card-row">
            <div class="row-left">
              <p>预算下达</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.investmentNum).format('0,00')}}</span>
            </div>
          </div>

          <div class="card-row">
            <div class="row-left">
              <p>投资完成</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.projectNum).format('0,00')}}</span>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-title">
            <p>专项下达率</p>
            <span>{{TopCount.releaserate}}%</span>
          </div>
          <div class="card-row">
            <div class="row-left">
              <p>年初画像</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.draw).format('0,00')}}</span>
            </div>
          </div>

          <div class="card-row">
            <div class="row-left">
              <p>预算下达</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.release).format('0,00')}}</span>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-title">
            <p>项目结转率</p>
            <span>{{TopCount.carryOverRate}}%</span>
          </div>
          <div class="card-row">
            <div class="row-left">
              <p>预算下达</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.investmentNum).format('0,00')}}</span>
            </div>
          </div>

          <div class="card-row">
            <div class="row-left">
              <p>项目结转额</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.carryOverAmount).format('0,00')}}</span>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-title">
            <p>工程转固率</p>
            <span>{{TopCount.zgPer}}%</span>
          </div>
          <div class="card-row">
            <div class="row-left">
              <p>在建工程年初数+本年增加数</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.zjgcncs).format('0,00')}}</span>
            </div>
          </div>

          <div class="card-row">
            <div class="row-left">
              <p>转固额</p>
              <span>单位:万元</span>
            </div>
            <div class="row-right">
              <span>{{numeral(TopCount.bnzgeAndYearIncrease).format('0,00')}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="tabs-wrap">
        <ul>
          <li :class="isActive == item.key&&'active'" v-for="(item) in tabsList" :key="item.key" @click="changeStatus(item.key)">
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
      <transition name="fade-transform" mode="out-in">
        <component :is="currentTabComponent"></component>
      </transition>
    </main>
    <div class="feedback" @click="handle_feedback()">反馈</div>
    <el-dialog title="问题反馈" :visible.sync="dialogVisible" width="70%" :append-to-body="true">
      <div>
        <div class="feedback-wrapper">
          <div class="td">
            <span class="red">*</span>问题反馈:
          </div>
          <ul class="q-list">
            <li class="it" @click="handle_module(it, i)" :class="{'acted': modulesIndex == i }" v-for="(it, i) in question.modules" :key="'modules' + i">{{it.moduleName}}</li>
          </ul>
        </div>
        <div class="feedback-wrapper">
          <div class="td">
            <span class="red">*</span>问题类型:
          </div>
          <ul class="q-list">
            <li class="it" @click="handle_type(it, i)" :class="{'acted': typeIndex == i }" v-for="(it, i) in question.questionTypes" :key="'types' + i">{{it.moduleName}}</li>
          </ul>
        </div>
        <div class="feedback-edit">
          <div class="td">
            <span class="red">*</span>问题描述:
          </div>
          <editor v-model="content" :height="150" />
        </div>
        <div class="feedback-edit">
          <div class="td">
            <span class="red">*</span>评分:
          </div>
          <div>
            <el-rate v-model="value" show-score text-color="#ff9900" score-template="{value}"></el-rate>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false; resetDialog()">取 消</el-button>
        <el-button type="primary" @click="handle_add()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";
import numeral from "numeral";
import BarLine from "./barLine";
import Tabs4 from "./tab4";
import Tabs3 from "./tab3";
import Tabs2 from "./tab2";
import Tabs1 from "./tab1";
import Tabs5 from "./tab5"; //投资画像 card

export default {
  components: {
    BarLine,
    Tabs1,
    Tabs2,
    Tabs3,
    Tabs4,
    Tabs5,
  },
  data() {
    return {
      numeral,
      currentTabComponent: "Tabs1",
      areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
      tabsList: [
        { name: "百元投资拉动增量收入", key: "Tabs1" },
        { name: "专项下达", key: "Tabs2" },
        { name: "在建项目", key: "Tabs3" },
        { name: "在建工程", key: "Tabs4" },
        { name: "投资健康度画像", key: "Tabs5" },
      ],
      isActive: "Tabs1",

      TopCount: {},
      dialogVisible: false,
      question: {},
      modulesIndex: 0,
      typeIndex: 0,
      content: "",
      value: 5,
    };
  },
  created() {
    this.getKanBanCountDataList();
    // this.changeStatus("Tabs1");
  },
  methods: {
    async changeStatus(key) {
      this.isActive = key;
      this.currentTabComponent = key;
    },
    async getKanBanCountDataList() {
      let data = await this.fetch($budgetAPI.getKanBanCountDataList);
      this.TopCount = JSON.parse(JSON.stringify(data));
      this.getList();
    },
    fetch(action) {
      return new Promise((resolve, reject) => {
        action(
          {},
          (res) => {
            if (res.code === 0) {
              resolve(res.content);
            } else {
              reject({});
            }
          },
          (err) => {}
        );
      });
    },
    getList() {
      $budgetAPI.getModuleList({}, (res) => {
        console.log(res);
        this.question = res.content;
      });
    },
    handle_feedback() {
      this.dialogVisible = true;
    },
    handle_module(it, i) {
      this.modulesIndex = i;
    },
    handle_type(it, i) {
      this.typeIndex = i;
    },
    handle_add() {
      var that = this,
        obj = that.question,
        moduleObj = obj.modules[that.modulesIndex],
        typeObj = obj.questionTypes[that.typeIndex];
      if (!that.content) {
        that.$message({
          type: "error",
          message: "请输入问题描述",
        });
        return false;
      }
      if (that.value <= 0) {
        that.$message({
          type: "error",
          message: "请选择评分",
        });
        return false;
      }

      $budgetAPI.addFeedBack(
        {
          moduleId: moduleObj.moduleId,
          functionModule: moduleObj.moduleName,
          typeId: typeObj.moduleId,
          questionType: typeObj.moduleName,
          content: that.content,
          score: that.value,
        },
        (res) => {
          console.log(res);
          if (res && res.code == 0) {
            that.$message({
              type: "success",
              message: "提交成功",
            });
          } else {
            that.$message({
              type: "error",
              message: "提交失败",
            });
          }
          that.resetDialog();
        }
      );
    },
    resetDialog() {
      var that = this;

      that.dialogVisible = false;
      that.value = 0;
      that.content = "";
      that.typeIndex = 0;
      that.modulesIndex = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  //   height: 8000px;
  // sideBar.png
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  // background: #fff;
  background: url(../../../assets/images/common/sideBar.png) no-repeat scroll
    left -80px / 100% 270px;

  position: relative;
  z-index: 101;
  padding: 10px 20px 20px;
  main {
    // background: #fff;
    // height: 400px;
    width: inherit;
    .card-wrap {
      width: inherit;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      margin-bottom: 10px;

      .card {
        flex: 1;
        border-radius: 20px;
        min-height: 180px;
        box-shadow: 0px 2px 15px 1px rgba(0, 0, 0, 0.1);
        padding: 10px 16px;
        box-sizing: border-box;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        top: 0;
        transition: all 0.5s ease;
        &:hover {
          box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, 0.25);
          top: 4px;
        }
        > div {
          flex: 1 1 0;
        }

        > :not(:last-child) {
          border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
        }

        .card-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          > span {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
          }
          > p {
            transition: all 0.5s ease;
            font-size: 14px;
            color: #fff;
            display: inline-block;
            font-weight: bold;
            padding-left: 10px;
            position: relative;
            &::before {
              content: "";
              width: 4px;
              height: 16px;
              background-color: #fff;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translate(0, -50%);
            }
          }
        }
        .card-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .row-left {
            p {
              font-size: 12px;
              font-weight: 600;
            }
            span {
              display: inline-block;
              font-size: 12px;
              color: rgba(255, 255, 255, 0.7);
            }
          }
          .row-right {
            span {
              font-size: 16px;
              font-weight: 600;
            }
          }
        }

        &:nth-child(1) {
          background: url(../../../assets/images/card/1@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #79b6ff, #93d4ff);
        }
        &:nth-child(2) {
          background: url(../../../assets/images/card/2@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #c1b2ff, #a99eff);
        }
        &:nth-child(3) {
          background: url(../../../assets/images/card/3@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #ffa645, #ffc157);
        }
        &:nth-child(4) {
          background: url(../../../assets/images/card/4@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #ff5caa, #ff88c0);
        }
        &:nth-child(5) {
          background: url(../../../assets/images/card/5@2x.png) no-repeat 100%
              0%,
            linear-gradient(-45deg, #c1b2ff, #aa9eff);
        }
        &:not(:last-child) {
          margin-right: 20px;
        }
      }
    }
    .tabs-wrap {
      // height: 50px;
      // background: red;
      padding: 10px 0 10px;
      ul {
        padding-left: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: #8991b3;
        li {
          cursor: pointer;
          &:hover {
            color: #0086ff;
          }
          span {
            position: relative;
            display: inline-block;
            line-height: 40px;
            transition: all 0.5s ease;
          }
          &.active > span {
            color: #000;
            &::before {
              content: "";
              width: 80%;
              height: 2px;
              background-color: #0086ff;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translate(-50%, 0);
            }
          }
        }
        > :not(:last-child) {
          margin-right: 50px;
        }
      }
    }
  }
}
.feedback-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .td {
    width: 80px;
    margin-right: 10px;
  }
  .q-list {
    display: flex;
    .it {
      margin: 0 10px;
      cursor: pointer;
      padding: 2px 5px;
      border-radius: 5px;
    }
    .acted {
      background-color: #0086ff;
      color: #fff;
    }
  }
}
.feedback-edit {
  display: flex;
  align-items: top;
  margin-bottom: 15px;
  .td {
    width: 80px;
    margin-right: 10px;
  }
}
</style>

<style >
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.2s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-25px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(25px);
}
.feedback {
  position: fixed;
  right: 20px;
  top: 300px;
  z-index: 211;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background-color: rgba(174, 174, 174, 0.7);
  color: #000;
  cursor: pointer;
  text-align: center;
}
</style>